<!doctype html>
<html lang="en">

<head>

    <!-- Basic Page Needs
    ================================================== -->
    <title>TubeLite Streaming Video HTML Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="TubeLite is - Professional A unique and beautiful collection of UI elements">
    <link rel="icon" href="assets/images/favicon.png">

    <!-- CSS 
    ================================================== -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/night-mode.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/uikit/3.2.1/css/uikit.min.css">

    <!-- icons
    ================================================== -->
    <link rel="stylesheet" href="assets/css/icons.css">

    <!-- Google font
    ================================================== -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">

</head>


<body>



    <!-- Content
    ================================================== -->
    <div uk-height-viewport class="uk-flex uk-flex-middle">
        <div class="uk-width-2-3@m uk-width-1-2@s m-auto rounded">
            <div class="uk-child-width-1-2@m uk-grid-collapse bg-gradient-primary" uk-grid>

                <!-- column one -->
                <div class="uk-margin-auto-vertical uk-text-center uk-animation-scale-up p-3 uk-light">
                    <img src="assets/images/logo-light-icon.png" width="45" alt="">
                    
                     <p>祝您观影愉快</p>
                </div>

                <!-- column two -->
                <div class="uk-card-default p-6">
                    <div class="my-4 uk-text-center">
                        <h3 class="mb-0">建立新帐户</h3>
                        <p class="my-2">填写空白以创建新帐户。</p>
                    </div>
                    <form class="uk-child-width-1-1 uk-grid-small" uk-grid>

                        <div>
                            <div class="uk-form-group">
                                <label class="uk-form-label" > 姓名</label>

                                <div class="uk-position-relative w-100">
                                    <span class="uk-form-icon">
                                        <i class="icon-feather-user"></i>
                                    </span>
                                    <input id="userName" class="uk-input" type="text" placeholder="Full name">
                                </div>

                            </div>
                        </div>
                        <div>
                            <div class="uk-form-group">
                                <label class="uk-form-label"> 邮箱</label>

                                <div class="uk-position-relative w-100">
                                    <span class="uk-form-icon">
                                        <i class="icon-feather-mail"></i>
                                    </span>
                                    <input id="email" class="uk-input" type="email" placeholder="name@example.com">
                                </div>

                            </div>
                        </div>

                        <div class="uk-width-1-2@s">
                            <div class="uk-form-group">
                                <label class="uk-form-label"> 密码</label>

                                <div class="uk-position-relative w-100">
                                    <span class="uk-form-icon">
                                        <i class="icon-feather-lock"></i>
                                    </span>
                                    <input id="password" class="uk-input" type="password" placeholder="********">
                                </div>

                            </div>
                        </div>
                        <div class="uk-width-1-2@s">
                            <div class="uk-form-group">
                                <label class="uk-form-label"> 确认密码</label>

                                <div class="uk-position-relative w-100">
                                    <span class="uk-form-icon">
                                        <i class="icon-feather-lock"></i>
                                    </span>
                                    <input id="passwordCF" class="uk-input" type="password" placeholder="********">
                                </div>

                            </div>
                        </div>

                        <div>
                            <div class="mt-4 uk-flex-middle uk-grid-small" uk-grid>
                                <div class="uk-width-expand@s">
                                    <p> 已有账户？ <a href="form-modern-login.html">登录</a></p>
                                </div>
                                <div class="uk-width-auto@s">
                                    <input id="register" type="button" class="button primary" value="注册"></input>
                                </div>
                            </div>
                        </div>

                    </form>
                </div><!--  End column two -->
 
            </div>
        </div>
    </div>

    <!-- Content -End
    ================================================== -->

<script src="assets/js/jquery-3.3.1.min.js"></script>
    <!-- For Night mode -->
    <script>
        (function (window, document, undefined) {
            'use strict';
            if (!('localStorage' in window)) return;
            var nightMode = localStorage.getItem('gmtNightMode');
            if (nightMode) {
                document.documentElement.className += ' night-mode';
            }
        })(window, document);


        (function (window, document, undefined) {

            'use strict';

            // Feature test
            if (!('localStorage' in window)) return;

            // Get our newly insert toggle
            var nightMode = document.querySelector('#night-mode');
            if (!nightMode) return;

            // When clicked, toggle night mode on or off
            nightMode.addEventListener('click', function (event) {
                event.preventDefault();
                document.documentElement.classList.toggle('night-mode');
                if (document.documentElement.classList.contains('night-mode')) {
                    localStorage.setItem('gmtNightMode', true);
                    return;
                }
                localStorage.removeItem('gmtNightMode');
            }, false);

        })(window, document);
		
		//注册方法
		$(function(){
		　　$("#register").click(function(){
			//必填校验
			//获取姓名
			var userName = $("#userName").val();
			if(userName == null || userName == ""){
				UIkit.notification({
					message: "昵称不能为空",
					status: 'primary',
					pos: 'top-center',
					timeout: 1000
				});
				return
			}
			//获取邮箱
			var email = $("#email").val();
			if(email == null || email == ""){
				UIkit.notification({
					message: "邮箱不能为空",
					status: 'primary',
					pos: 'top-center',
					timeout: 1000
				});
				return
			}
			var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
			if(!pattern.test(email)){
				UIkit.notification({
					message: "请填写正确的邮箱格式",
					status: 'primary',
					pos: 'top-center',
					timeout: 1000
				});
				return
			};
			
			//获取密码
			var password = $("#password").val();
			if(password == null || password == ""){
				UIkit.notification({
					message: "密码不能为空",
					status: 'primary',
					pos: 'top-center',
					timeout: 1000
				});
				return
			}
			
			//获取确认密码
			var passwordCF = $("#passwordCF").val();
			if(passwordCF == null || passwordCF == ""){
				UIkit.notification({
					message: "确认密码不能为空",
					status: 'primary',
					pos: 'top-center',
					timeout: 1000
				});
				return
			}
			
			if(password != passwordCF){
					UIkit.notification({
						message: "两次密码不一致",
						status: 'primary',
						pos: 'top-center',
						timeout: 1000
					});
					return
			}


 			$.ajax({
				url:apiurl + "tUser/register",
				data:{
					nickName:userName,
					userPassword:password,
					email:email
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				success:function(data){
					if(data.msg == "注册成功"){
						location.href = "form-modern-login.html";
					}else{
						UIkit.notification({
							message: data.msg,
							status: 'primary',
							pos: 'top-center',
							timeout: 1000
						});
					}
				}
			}); 
			

		　　});
});
		
    </script>


    <!-- javaScripts
        ================================================== -->
    <script src="https://cdn.bootcdn.net/ajax/libs/uikit/3.2.1/js/uikit.min.js"></script>
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/simplebar.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/public.js"></script>

</body>

</html>